<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>My JSP 'index.jsp' starting page</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="<%=basePath%>js/jquery-ui-1.8.10.custom.min.js"></script>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>css/ui-lightness/jquery-ui-1.8.10.custom.css">
		<style>
#draggable {
	width: 100px;
	height: 100px;
	padding: 0.5em;
	float: left;
	margin: 10px 10px 10px 0;
}

#droppable {
	width: 150px;
	height: 150px;
	padding: 0.5em;
	float: left;
	margin: 10px;
}

.ui-widget-content {
	background:url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
	border:1px solid #AAAAAA;
	color:#222222;
}
</style>

		<script>
	$(function() {
		$("#draggable").draggable({ stop: function(event, ui){
				alert("left"+ui.position.left + "\r\n top:"+ui.position.top+"\r\n"+$(this).attr("className"));
			}
		} );
		$("#droppable").droppable(
				{
					drop : function(event, ui) {
						$(this).addClass("ui-state-highlight").find("p").html("Dropped!");
					}
				});
	});
</script>
	</head>
	<body>


		<div class=demo>
			<div id=draggable class=ui-widget-content>
				<P>
					Drag me to my target
				</P>
			</div>
			<div id=droppable class=ui-widget-header>
				<P>
					Drop here
				</P>
			</div>
		</div>
		<!-- End demo -->
		<DIV style="DISPLAY: none" class=demo-description>
			<P>
				Enable any DOM element to be droppable, a target for draggable
				elements.
			</P>
		</DIV>
		<!-- End demo-description -->
	</body>
</html>
